import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';
import {conditionObjWithType} from '../../../../utils/Conditions'
import {CarSaleStatus} from '../../../../utils/Enum'
import Constant from '../../../../utils/Constant'//全局变量


export default class CarInfoBox extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    };

    render() {
        return (
            <View style={styles.carInfoBox}>
                {
                    //加盟商：listPrice、markedPrice、guidePrice
                    //严选商家：wholesalePrice、markedPrice、guidePrice
                    // listPrice: 挂牌价，加盟商显示
                    // markedPrice：加盟商显示展厅标价，严选商家展示一口价
                    // wholesalePrice：批发价，严选商家显示
                    // guidePrice：新车指导价
                }
                {/* 
                    联盟商家的车：红一口价，灰批发价（不给加盟商看）
                    加盟商的车：红挂牌价，灰展厅价
                */}
                {
                    this.props.isFranchisee ?
                        <View>
                            <View style={styles.priceBox}>
                                <View style={styles.leftPriceBox}>
                                    {
                                        this.props.data.listPrice || this.props.data.markedPrice ?
                                            <Text
                                                style={styles.priceText}>{this.props.data.listPrice ? (this.props.data.listPrice / 10000).toFixed(2) : (this.props.data.markedPrice / 10000).toFixed(2)}</Text>
                                            :
                                            <Text style={styles.priceText}>{'未定价'}</Text>
                                    }
                                    {
                                        this.props.data.listPrice || this.props.data.markedPrice ?
                                            <Text style={styles.unitText}>万</Text>
                                            :
                                            null
                                    }

                                    {
                                        this.props.data.listPrice || this.props.data.markedPrice ?
                                            <View style={styles.priceTypeBox}>
                                                {
                                                    this.props.data.listPrice ?
                                                        <Text style={styles.priceTypeText}>{'挂牌价'}</Text>
                                                        :
                                                        <Text style={styles.priceTypeText}>{'展厅价'}</Text>
                                                }
                                            </View>
                                            :
                                            null
                                    }
                                </View>

                                <View style={{flexDirection: 'column', alignItems: 'flex-end'}}>
                                    {
                                        this.props.data.guidePrice ?
                                            <Text
                                                style={styles.guidePriceText}>{'新车指导价：' + (this.props.data.guidePrice / 10000).toFixed(2) + '万'}</Text>
                                            :
                                            null
                                    }

                                    {this.props.isFranchisee && this.props.quotationStatisticsData ?
                                        <View style={styles.bottomLeftContain}>
                                            {/* <Image style={styles.lookImg} source={require('source/image/car/icon_look.png')}></Image> */}
                                            <Text
                                                style={styles.guidePriceText}>{this.props.quotationStatisticsData.pageView}人浏览</Text>
                                        </View>
                                        : null
                                    }

                                </View>

                            </View>
                            {/*{*/}
                            {/*    this.props.data.listPrice && this.props.data.markedPrice ?*/}
                            {/*        <Text style={styles.listPriceText}>{('展厅价：') + (this.props.data.markedPrice / 10000).toFixed(2) + '万'}</Text>*/}
                            {/*        :*/}
                            {/*        null*/}
                            {/*}*/}
                        </View>
                        :
                        <View>
                            <View style={styles.priceBox}>
                                <View style={styles.leftPriceBox}>
                                    {
                                        this.props.data.markedPrice ?
                                            <Text
                                                style={styles.priceText}>{(this.props.data.markedPrice / 10000).toFixed(2)}</Text>
                                            :
                                            <Text style={styles.priceText}>{'未定价'}</Text>
                                    }
                                    {
                                        this.props.data.markedPrice ?
                                            <Text style={styles.unitText}>万</Text>
                                            :
                                            null
                                    }

                                    {
                                        this.props.data.markedPrice ?
                                            <View style={styles.priceTypeBox}>
                                                <Text style={styles.priceTypeText}>{'一口价'}</Text>
                                            </View>
                                            :
                                            null
                                    }
                                </View>
                                {
                                    this.props.data.guidePrice ?
                                        <Text
                                            style={styles.guidePriceText}>{'新车指导价：' + (this.props.data.guidePrice / 10000).toFixed(2) + '万'}</Text>
                                        :
                                        null
                                }
                            </View>
                            {/*{*/}
                            {/*    !Constant.userInfo.isFranchisee && this.props.data.wholesalePrice ?*/}
                            {/*        <Text*/}
                            {/*            style={styles.listPriceText}>{('批发价：') + (this.props.data.wholesalePrice / 10000).toFixed(2) + '万'}</Text>*/}
                            {/*        :*/}
                            {/*        null*/}
                            {/*}*/}
                        </View>
                }

                <Text style={styles.brandText}>
                    {
                        this.props.data.carType == 1 ?
                            <View style={styles.newCarBox}>
                                <Text style={styles.newCarText}>新车</Text>
                            </View>
                            :
                            null
                    }
                    {(this.props.data.carType == 1 ? '  ' : '') + (this.props.data.cityName ? '[' + this.props.data.cityName + '] ' : '') + this.props.data.seriesName + ' ' + this.props.data.speciesName}
                </Text>

                {/* 有维保已自检 */}
                {/*{*/}
                {/*    //isFranchisee 是否是联盟商家*/}
                {/*    this.props.isOfferPrice ?*/}
                {/*        <View style={{flexDirection: "row", marginTop: 5}}>*/}
                {/*            {*/}
                {/*                this.props.data.maintenanceRecord && (this.props.data.maintenanceRecord.reportPcUrl || this.props.data.maintenanceRecord.reportWapUrl || this.props.data.maintenanceRecord.reportPic) && !this.props.isSelfCar ?*/}
                {/*                    <View style={{borderRadius: 4, marginRight: 5}}>*/}
                {/*                        <Text style={{*/}
                {/*                            fontSize: 12,*/}
                {/*                            backgroundColor: "#F1F7EB",*/}
                {/*                            color: "#81B337",*/}
                {/*                            padding: 2*/}
                {/*                        }}>有维保</Text>*/}
                {/*                    </View>*/}
                {/*                    :*/}
                {/*                    null*/}
                {/*            }*/}

                {/*            {*/}
                {/*                (this.props.data.saleStatus == CarSaleStatus.CarSaleStatuseOnSale || this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved) ?*/}
                {/*                    (*/}
                {/*                        this.props.data.detectionStatus ?*/}
                {/*                            <View style={{borderRadius: 4, marginRight: 5}}>*/}
                {/*                                <Text style={{*/}
                {/*                                    fontSize: 12,*/}
                {/*                                    backgroundColor: "#FFF7E0",*/}
                {/*                                    color: "#FF7B00",*/}
                {/*                                    padding: 2*/}
                {/*                                }}>已自检</Text>*/}
                {/*                            </View>*/}
                {/*                            :*/}
                {/*                            null*/}
                {/*                    )*/}
                {/*                    :*/}
                {/*                    null*/}
                {/*            }*/}

                {/*            /!*{*!/*/}
                {/*            /!*    this.props.detectionReportPic || this.props.detectionReportUrl || this.props.detectionReportPdf ?*!/*/}
                {/*            /!*        <View style={{borderRadius: 4, marginRight: 5}}>*!/*/}
                {/*            /!*            <Text style={{*!/*/}
                {/*            /!*                fontSize: 12,*!/*/}
                {/*            /!*                backgroundColor: "#FFF7E0",*!/*/}
                {/*            /!*                color: "#FF7B00",*!/*/}
                {/*            /!*                padding: 2*!/*/}
                {/*            /!*            }}>已自检</Text>*!/*/}
                {/*            /!*        </View>*!/*/}
                {/*            /!*        :*!/*/}
                {/*            /!*        null*!/*/}
                {/*            /!*}*!/*/}

                {/*        </View> : null*/}
                {/*}*/}


                {/*{*/}
                {/*    // 非报价页面才展示*/}
                {/*    !this.props.isOfferPrice && (*/}
                {/*        */}
                {/*    )*/}
                {/*}*/}

                <View style={styles.labelBg}>
                    {this.renderLabelBox()}
                    {/*{*/}
                    {/*    // 加盟商展示的报价信息*/}
                    {/*    this.props.isFranchisee && this.props.quotationStatisticsData && this.props.quotationStatisticsData.pageView >= 0 ?*/}
                    {/*        <Text style={{*/}
                    {/*            color: '#666666',*/}
                    {/*            fontSize: 12,*/}
                    {/*            marginTop: 11*/}
                    {/*        }}>{this.props.quotationStatisticsData.pageView + '浏览'}</Text>*/}
                    {/*        :*/}
                    {/*        null*/}
                    {/*}*/}
                </View>


                {
                    // 自己的车展示报价信息
                    this.props.isSelfCar && this.props.quotationStatisticsData && this.props.isPriceOperatePerm ?
                        <View style={styles.offerPriceBox}>
                            <View style={styles.carInfoBottomItemBox}>
                                <Text
                                    style={styles.bottomTitleText}>{this.props.quotationStatisticsData.maxQuotationPrice ? (this.props.quotationStatisticsData.maxQuotationPrice / (10000 * 100)).toFixed(2) + '万' : '未报价'}</Text>
                                <Text style={styles.bottomDesText}>最高报价</Text>
                            </View>
                            <View style={styles.carInfoBottomItemBox}>
                                <Text
                                    style={styles.bottomTitleText}>{this.props.quotationStatisticsData.minQuotationPrice ? (this.props.quotationStatisticsData.minQuotationPrice / (10000 * 100)).toFixed(2) + '万' : '未报价'}</Text>
                                <Text style={styles.bottomDesText}>最低报价</Text>
                            </View>
                            <View style={styles.carInfoBottomItemBox}>
                                <Text
                                    style={styles.bottomTitleText}>{this.props.quotationStatisticsData.quotationQuantity ? this.props.quotationStatisticsData.quotationQuantity + '' : '0'}</Text>
                                <Text style={styles.bottomDesText}>报价人数</Text>
                            </View>
                            <View style={styles.carInfoBottomItemBox}>
                                <Text
                                    style={styles.bottomTitleText}>{this.props.quotationStatisticsData.conversationQuantity ? this.props.quotationStatisticsData.conversationQuantity + '' : '0'}</Text>
                                <Text style={styles.bottomDesText}>沟通人数</Text>
                            </View>
                        </View>
                        :
                        null
                }


                {/*<View style={styles.carInfoBottomBox}>*/}
                {/*    <View style={styles.carInfoBottomItemBox}>*/}
                {/*        <Text style={styles.bottomTitleText}>{this.props.data.registerDate && this.props.data.registerDate.length >= 2 ? this.props.data.registerDate.split('-')[0] + '-' + this.props.data.registerDate.split('-')[1] : '-'}</Text>*/}
                {/*        <Text style={styles.bottomDesText}>上牌日期</Text>*/}
                {/*    </View>*/}
                {/*    <View style={styles.carInfoBottomItemBox}>*/}
                {/*        <Text style={styles.bottomTitleText}>{this.props.data.mileage ? (this.props.data.mileage / 10000).toFixed(2) + '万' : '-'}</Text>*/}
                {/*        <Text style={styles.bottomDesText}>表显里程</Text>*/}
                {/*    </View>*/}
                {/*    <View style={styles.carInfoBottomItemBox}>*/}
                {/*        <Text style={styles.bottomTitleText}>{this.props.data.cityName ? this.props.data.cityName : '-'}</Text>*/}
                {/*        <Text style={styles.bottomDesText}>所在城市</Text>*/}
                {/*    </View>*/}
                {/*    <View style={styles.carInfoBottomItemBox}>*/}
                {/*        <Text style={styles.bottomTitleText}>{this.props.data.color && this.props.data.color.length > 0 ? this.props.data.color[0].outerColor : '-'}</Text>*/}
                {/*        <Text style={styles.bottomDesText}>颜色</Text>*/}
                {/*    </View>*/}
                {/*    <View style={styles.carInfoBottomItemBox}>*/}
                {/*        <Text style={styles.bottomTitleText}>{this.props.data.emissionStd ? conditionObjWithType('emissionStd')[this.props.data.emissionStd] : '-'}</Text>*/}
                {/*        <Text style={styles.bottomDesText}>排放标准</Text>*/}
                {/*    </View>*/}
                {/*</View>*/}

                {
                    // 联盟商家展示的报价信息
                    this.props.quotationStatisticsData && !this.props.isSelfCar ?
                        <View style={[styles.offerPriceBox, {height: 38, justifyContent: 'flex-start'}]}>
                            <Image style={{width: 20, height: 20}}
                                   source={this.props.quotationRecordStatus == 0 ? require('source/image/wait_icon.png') : require('source/image/chat_icon.png')}/>
                            <Text style={{
                                fontSize: 16,
                                fontWeight: '500',
                                color: '#F99802',
                                marginLeft: 8
                            }}>{this.getRecordStatus()}</Text>
                        </View>
                        :
                        null
                }

                {
                    this.props.isOfferPrice ?
                        <View style={styles.createTimeBox}>
                            <Text style={styles.createTimeText}>创建：{this.props.data.createTime ?? '暂无'}</Text>
                            <Text style={styles.createTimeText}>上架：{this.props.data.upperTime ?? '暂无'}</Text>
                        </View>
                        :
                        null
                }


            </View>
        );
    }

    getRecordStatus() {

        if (this.props.quotationRecordStatus === '') {
            return '待处理'
        } else if (this.props.quotationRecordStatus == 1 || this.props.quotationRecordStatus == 2 || this.props.quotationRecordStatus == 3) {
            return '待确认'
        } else {
            return '沟通中'
        }
    }

    renderLabelBox() {
        return (
            <View style={styles.labelBox}>
                {/* 对自己显示 */}
                {/* 库存状态 */}
                {
                    this.props.data.storeStatus && (this.props.data.saleStatus == CarSaleStatus.CarSaleStatuseOnSale || this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved) && this.props.isSelfCar ?
                        <View style={styles.labelItemBox}>
                            <Text
                                style={styles.labelText}>{conditionObjWithType('storeStatus')[this.props.data.storeStatus]}</Text>
                        </View>
                        :
                        null
                }
                {/* 库龄 */}
                {
                    this.props.data.purchaseDate && (this.props.data.saleStatus == CarSaleStatus.CarSaleStatuseOnSale || this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved) && this.props.isSelfCar ?
                        <View style={styles.labelItemBox}>
                            <Text
                                style={styles.labelText}>{'库存' + this.getDaysBetweenDates(this.props.data.purchaseDate) + '天'}</Text>
                        </View>
                        :
                        null
                }
                {/* 收购性质，在全款(purchaseType=1)的时候隐藏 */}
                {
                    this.props.data.purchaseType && this.props.data.purchaseType != 1 && (this.props.data.saleStatus == CarSaleStatus.CarSaleStatuseOnSale || this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved || this.props.data.saleStatus == CarSaleStatus.CarSaleStatusSaled) && this.props.isSelfCar ?
                        <View style={styles.labelItemBox}>
                            <Text
                                style={styles.labelText}>{conditionObjWithType('purchaseType')[this.props.data.purchaseType]}</Text>
                        </View>
                        :
                        null
                }
                {/* 已上架/未上架 */}
                {/* 
                    加盟商已上架（加盟商上架到报价中心）：this.props.data.joinQuotationCenter && this.props.isFranchisee
                    严选商家已上架（严选商家上架到严选车源）：this.props.data.joinUnion && !this.props.isFranchisee
                 */}
                {
                    (this.props.data.saleStatus == CarSaleStatus.CarSaleStatuseOnSale || this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved) && this.props.isSelfCar ?
                        <View
                            style={[styles.labelItemBox, {backgroundColor: (this.props.data.joinQuotationCenter && this.props.isFranchisee) || (this.props.data.joinUnion && !this.props.isFranchisee) ? '#FFF7E0' : '#F4F4F4'}]}>
                            <Text
                                style={[styles.labelText, {color: (this.props.data.joinQuotationCenter && this.props.isFranchisee) || (this.props.data.joinUnion && !this.props.isFranchisee) ? '#FF7B00' : '#666'}]}>{(this.props.data.joinQuotationCenter && this.props.isFranchisee) || (this.props.data.joinUnion && !this.props.isFranchisee) ? '已上架' : '未上架'}</Text>
                        </View>
                        :
                        null

                }

                {/* 已预订 */}
                {
                    this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved && this.props.isSelfCar ?
                        <View style={[styles.labelItemBox, {backgroundColor: '#FFF7E0'}]}>
                            <Text style={[styles.labelText, {color: '#FF7B00'}]}>已预订</Text>
                        </View>
                        :
                        null
                }
                {/* 销售状态
                {
                    this.props.data.saleStatus && (this.props.data.saleStatus == CarSaleStatus.CarSaleStatuseOnSale || this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved) && this.props.isSelfCar ?
                        <View style={[styles.labelItemBox, { borderColor: '#F99802' }]}>
                            <Text style={[styles.labelText, { color: '#F99802' }]}>{conditionObjWithType('saleStatus')[this.props.data.saleStatus]}</Text>
                        </View>
                        :
                        null
                } */}
                {/* 检测状态 */}
                {
                    (this.props.data.saleStatus == CarSaleStatus.CarSaleStatuseOnSale || this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved) && this.props.isSelfCar ?
                        (
                            this.props.data.detectionStatus ?
                                <View
                                    style={[styles.labelItemBox, {backgroundColor: this.props.data.detectionStatus == 3 ? '#FFF7E0' : '#F4F4F4'}]}>
                                    <Text
                                        style={[styles.labelText, {color: this.props.data.detectionStatus == 3 ? '#FF7B00' : '#666'}]}>{conditionObjWithType('carDetectionStatus')[this.props.data.detectionStatus]}</Text>
                                </View>
                                : null
                                // <View style={styles.labelItemBox}>
                                //     <Text style={styles.labelText}>{'未自检'}</Text>
                                // </View>
                        )
                        :
                        null
                }

                {/* 对外展示，加盟商车源：检测认证、 有维保，严选车源：检测认证、 有维保、已预订*/}
                {
                    this.props.data.detectionStatus == 3 && !this.props.isSelfCar ?
                        <View style={[styles.labelItemBox, {backgroundColor: '#FFF7E0'}]}>
                            <Text style={[styles.labelText, {color: '#FF7B00'}]}>检测认证</Text>
                        </View>
                        :
                        null
                }

                {
                    this.props.data.maintenanceRecord && (this.props.data.maintenanceRecord.reportPcUrl || this.props.data.maintenanceRecord.reportWapUrl || this.props.data.maintenanceRecord.reportPic) && !this.props.isSelfCar ?
                        <View style={[styles.labelItemBox, {backgroundColor: '#F1F7EB'}]}>
                            <Text style={[styles.labelText, {color: '#8BB34F'}]}>有维保</Text>
                        </View>
                        :
                        null
                }

                {
                    this.props.data.saleStatus == CarSaleStatus.CarSaleStatusReserved && !this.props.isSelfCar && this.props.isFranchisee ?
                        <View style={[styles.labelItemBox, {backgroundColor: '#FFF7E0'}]}>
                            <Text style={[styles.labelText, {color: '#FF7B00'}]}>已预订</Text>
                        </View>
                        :
                        null
                }

            </View>
        )
    }

    getDaysBetweenDates(dateString) {
        let pastDate = new Date(dateString);
        let currDate = new Date()
        const timeDiff = Math.abs(currDate.getTime() - pastDate.getTime());
        // 将毫秒转换为天数
        return Math.floor(timeDiff / (1000 * 60 * 60 * 24)) + 1;
    }

}

const styles = StyleSheet.create({
    carInfoBox: {
        width: '100%',
        flexDirection: 'column',
        backgroundColor: '#fff',
        paddingHorizontal: 16,
        marginTop: -6,
        paddingTop: 14,
        paddingBottom: 14,
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
    },
    priceBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    leftPriceBox: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    priceText: {
        fontSize: 28,
        color: '#ED542E',
        fontWeight: '500',
    },
    unitText: {
        marginLeft: 2,
        fontSize: 14,
        color: '#ED542E',
        marginTop: 12,
    },
    priceTypeBox: {
        marginLeft: 8,
        marginTop: 12,
        paddingHorizontal: 4,
        height: 16,
        borderRadius: 1,
        backgroundColor: 'rgba(253,101,33,0.1)',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    priceTypeText: {
        fontSize: 10,
        fontWeight: '500',
        color: '#FD6521'
    },
    guidePriceText: {
        marginTop: 12,
        fontSize: 12,
        color: '#666666'
    },
    listPriceText: {
        color: '#666666',
        fontSize: 12,
    },
    labelBg: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    labelBox: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    labelItemBox: {
        marginTop: 11,
        marginRight: 6,
        paddingHorizontal: 10,
        height: 21,
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 2,
        backgroundColor: '#F4F4F4'
    },
    labelText: {
        fontSize: 12,
        color: '#666'
    },
    brandText: {
        marginTop: 14,
        lineHeight: 25,
        fontSize: 18,
        color: '#333333',
        fontWeight: '500'
    },
    newCarBox: {
        paddingHorizontal: 10,
        height: 24,
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'rgba(37, 162, 240, 0.1)',
        marginVertical: -2,
    },
    newCarText: {
        color: '#25A2F0',
        fontSize: 14,
        fontWeight: '500'
    },
    carInfoBottomBox: {
        marginTop: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 42,
    },
    carInfoBottomItemBox: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
    },
    bottomTitleText: {
        fontSize: 14,
        fontWeight: '500',
        color: '#333333',
    },
    bottomDesText: {
        marginTop: 8,
        fontSize: 12,
        color: '#666666',
    },

    offerPriceBox: {
        paddingHorizontal: 15,
        width: '100%',
        height: 72,
        backgroundColor: '#F9F9F9',
        borderRadius: 4,
        marginTop: 10,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    bottomLeftContain: {
        flexDirection: 'row',
        alignItems: 'center',

    },

    lookImg: {
        width: 40,
        height: 24,
        resizeMode: 'contain'
    },
    lookText: {
        fontSize: 14,
        color: '#666666'
    },

    createTimeBox: {
        flexDirection: 'row',
        height: 20,
        alignItems: 'center',
        justifyContent: 'space-between',
        marginTop: 10
    },
    createTimeText: {
        fontSize: 12,
        color: '#666666'
    }

})